<template>
    <BpmComponent :processInstanceId="processInstanceId">
        <template #approval-info>
            <up-form labelPosition="left" labelWidth="120">
                <up-form-item v-for="field in formFields" :key="field.key" :label="field.label" borderBottom>
                    <!-- 如果是附件 -->
                    <view v-if="field.isDocument && formData[field.key]" class="file-actions">
                        <template v-if="field.isArray">
                            <template v-if="(formData[field.key] || []).length > 0">
                                <view v-for="(item, idx) in formData[field.key]" :key="idx" class="file-item">
                                    <text class="file-link" @click="previewFile(item, formData[field.name]?.[idx])">
                                        {{ getFileName(formData[field.name]?.[idx]) || '无' }}
                                    </text>
                                </view>
                            </template>
                            <template v-else>
                                <text class="file-empty">无</text>
                            </template>
                        </template>

                        <!-- 如果不是数组 -->
                        <template v-else>
                            <text class="file-link" @click="previewFile(formData[field.key], formData[field.name])">
                                {{ getFileName(formData[field.name]) || '无' }}
                            </text>
                        </template>

                    </view>
                    <!-- 普通字段 -->
                    <text v-else>
                        {{ field.format ? field.format(formData[field.key]) : formData[field.key] || '无' }}
                    </text>
                </up-form-item>
            </up-form>
        </template>
    </BpmComponent>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, unref, reactive, nextTick, getCurrentInstance } from 'vue'
import BpmComponent from '@/components/processInstance/detail/index.vue'
import {
    GeneralContractApi,
    GeneralContractVO
} from '@/api/legal/contractManager/generalcontract'
import { getFileName, parseArrayField, previewFile } from '@/utils/fileUtils'


const processInstanceId = ref(null)// 流程实例的编号
const id = ref(null)
const formData = ref<GeneralContractVO>({} as any)
const formFields = [
    { label: '合同名称', key: 'contractName' },
    { label: '合同编号', key: 'contractNumber' },
    { label: '甲方', key: 'partyA' },
    { label: '乙方', key: 'partyB' },
    { label: '是否为第三方', key: 'isParty', format: (val: any) => (val === false ? '否' : val === true ? '是' : '未知') },
    { label: '丙方', key: 'partyC' },
    { label: '合同类别', key: 'contractType' },
    { label: '合同金额', key: 'contractAmount' },
    { label: '所属企业', key: 'company' },
    { label: '承办联系人', key: 'handlerContact' },
    { label: '承办联系人电话', key: 'handlerPhone' },
    { label: '是否授权', key: 'isAuthorized', format: (val: any) => (val === false ? '未授权' : val === true ? '已授权' : '未知') },
    { label: '委托代理人姓名', key: 'authorizedPerson' },
    { label: '备注', key: 'remark' },
    { label: '附件', key: 'eids', isDocument: true, name: 'ename', isArray: true },
]
onLoad(async (options) => {
    processInstanceId.value = options?.processInstanceId
    id.value = options?.id
    /** 获得详情 */
    try {
        const data = await GeneralContractApi.getGeneralContract(Number(id.value))
        formData.value = data
        formData.value.eids = parseArrayField(data.eids);
        formData.value.ename = parseArrayField(data.ename);
        console.log('formData.value', formData.value);
        console.log('formData.value', formData.value);

    } catch (error) {
        console.log('加载数据失败')
    }
})
</script>

<style>
/* 样式 */
.file-link {
	margin-right: 20rpx;
	display: inline-block;
	/* 让宽度生效 */
	max-width: 240px;
	/* 你可以改为你想要的宽度 */
	overflow: hidden;
	/* 超出部分隐藏 */
	white-space: nowrap;
	/* 不换行 */
	text-overflow: ellipsis;
	/* 超出显示省略号 */
	color: #007AFF;
	text-decoration: underline;
	cursor: pointer;

}
</style>